<%- include('header.html') -%>
  <!-- 轮播图 -->
  <div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
    <ol class="carousel-indicators">
      <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
      <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
      <li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
      <li data-target="#carouselExampleIndicators" data-slide-to="3"></li>
    </ol>
    <div class="carousel-inner">
      <div class="carousel-item active">
        <img src="holder.js/100px400?text=😀&random=yes" class="d-block w-100" alt="..." />
      </div>
      <div class="carousel-item">
        <img src="holder.js/100px400?text=😄&random=yes" class="d-block w-100" alt="..." />
      </div>
      <div class="carousel-item">
        <img src="holder.js/100px400?text=😂&random=yes" class="d-block w-100" alt="..." />
      </div>
      <div class="carousel-item">
        <img src="holder.js/100px400?text=这里是holder-js&random=yes" class="d-block w-100" alt="..." />
      </div>
    </div>
    <a class="carousel-control-prev" href="#carouselExampleIndicators" data-slide="prev">
      <span class="carousel-control-prev-icon"></span>
    </a>
    <a class="carousel-control-next" href="#carouselExampleIndicators" data-slide="next">
      <span class="carousel-control-next-icon"></span>
    </a>
  </div>

  <div class="container mt-5">
    <h2 class="mb-4">热门推荐</h2>
    <div class="card-deck">
      <% hots.forEach(hot=> { %>
        <div class="card h-100 shadow-lg p-3 mb-5 bg-white rounded">
          <img src="holder.js/100px200?text=<%= hot.title %>&bg=006699&fg=ffffff&size=30" class="card-img-top"
            alt="..." />
          <div class="card-body">
            <h5 class="card-title">
              <%= hot.title %>
            </h5>
            <p class="card-text">
              <small class="text-muted">
                <%= hot.time.toLocaleString() %>
              </small>
            </p>
            <p class="card-text">
              <%= hot.content %>
            </p>
          </div>
          <div class="card-footer bg-white border-0">
            <a href="/article/<%=hot.id %>" class="btn btn-primary float-right stretched-link">查看详情</a>
          </div>
        </div>
        <% }) %>
    </div>
  </div>

  <div class="container mt-5">
    <h2 class="mb-4">最新博文</h2>
    <div class="row row-4">
      <% articles.forEach(article=> { %>
        <div class="col-md-3 col-xs-1 my-3 newsblog">
          <div class="card h-100 shadow-lg p-3 mb-5 bg-white rounded">
            <img src="holder.js/100px150?text=<%= article.title %>&bg=39DBAC&fg=ffffff&size=20" class="card-img-top"
              alt="..." />
            <div class="card-body">
              <h5 class="card-title">
                <%= article.title %>
              </h5>
              <p class="card-text">
                <small class="text-muted">
                  <%= article.time.toLocaleString() %>
                </small>
              </p>
              <p class="card-text">
                <%= article.content %>
              </p>
              <a href="/article/<%=article.id %>" class="stretched-link"></a>
            </div>
          </div>
        </div>
        <% }) %>
    </div>
  </div>

  <%- include('footer.html') -%>